<template>
  <div>
    <myheader></myheader>
    <navtable></navtable>
    <b class="line"></b>
    <div class="clear"></div>
    <div class="center" style="margin-top:0px">
      <div class="col-main">
        <div class="main-wrap">
          <!--标题 -->
          <div class="am-cf am-padding">
            <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">账户信息</strong> / <small>Account&nbsp;Balance</small></div>
          </div>
          <hr />
          <div class="finance">
            <div class="financeText">
              <p>可用余额:<span>¥{{account.balance}}</span></p>
              <el-button type="info" style="color:white;padding:5px 10px" disabled>余额提现</el-button>
              <!-- <a href="safety.html">安全中心：保护账户资产安全</a> -->
            </div>
            <div class="financeText">
              <p>
                <label style="width:50px">支付宝:</label>
                <span v-if="account.aliPay!=-1">{{account.aliPay}}</span>
                <!-- <span v-if="account.aliPay==-1">未绑定</span> -->
              </p>
              <el-button type="info" style="color:white;padding:5px 10px" v-if="account.aliPay!=-1" disabled>解绑</el-button>
              <el-button type="primary" style="color:white;padding:5px 10px" disabled v-else>绑定</el-button>
              <!-- <a href="safety.html">安全中心：保护账户资产安全</a> -->
            </div>

            <div class="financeText">
              <p>余额变动明细:</p>
              <!-- <a href="safety.html">安全中心：保护账户资产安全</a> -->
            </div>
            <div class="walletList">
              <div class="walletTitle">
                <li class="time">创建时间</li>
                <li class="name">详情</li>
                <li class="amount">金额</li>
                <li class="balance">余额</li>
              </div>
              <div class="clear"></div>
              <div class="walletCont">
                <li class="cost" v-for="log in logs">
                  <div class="time">
                    <p v-text="dateFormatter(log.createTime)">
                    </p>
                    <!-- <p class="text-muted"> 18:41
                    </p> -->
                  </div>
                  <div class="title name">
                    <p class="content">
                      {{log.comment}}
                    </p>
                  </div>

                  <div class="amount">
                    <span class="amount-pay" v-if="log.modType==2">-{{log.balance}}</span>
                    <span class="amount-pay" v-if="log.modType==1">+{{log.balance}}</span>
                  </div>
                  <div class="balance">
                    <span>余额：</span><em>{{log.afterBalance}}</em>
                  </div>
                </li>

              </div>

              <!--分页-->
              <ul class="am-pagination am-pagination-right">
                <el-pagination background layout="prev, pager, next" v-bind:total="total" :current-page.sync="page" v-on:current-change="qryList()">
                </el-pagination>
              </ul>

            </div>

          </div>
        </div>
        <!--底部-->
        <foot></foot>
      </div>
      <leftmenu></leftmenu>
    </div>
    <navfull></navfull>
  </div>
</template>

<script>
import myheader from '@/components/myheader.vue'
import navfull from '@/components/navfull.vue'
import navtable from '@/components/navtable.vue'
import leftmenu from '@/components/leftmenu.vue'
import foot from '@/components/foot.vue'
export default {
  name: 'acccount',
  data () {
    return {
      total: 0,
      page: 1,
      logs: [],
      account: {}
    }
  },
  components: {
    myheader,
    navfull,
    navtable,
    leftmenu,
    foot
  },
  mounted () {
    this.qryList();
    this.qryAccount();
  },
  methods: {
    qryAccount () {
      this.axios.get("/user/account/account").then((res) => {
        var result = res.data;
        if (result.code == 200) {
          this.account = result.data;
        }
      })
    },
    qryList () {
      this.axios.get("/user/account/logs", {
        params: {
          page: this.page,
          pageSize: 10,
          logType: 1
        }
      }).then((res) => {
        var result = res.data;
        if (result.code == 200) {
          this.total = result.total;
          this.logs = result.data;
        } else {

        }
      })
    },
    dateFormatter (date) {
      var time = new Date(date);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return y + '-' + add0(m) + '-' + add0(d) + ' ' + add0(h) + ':' + add0(mm) + ':' + add0(s);
    },
  }
}
function add0 (m) {
  return m < 10 ? '0' + m : m
}
</script>

<style scoped>
@import "../../../AmazeUI-2.4.2/assets/css/admin.css";
@import "../../../AmazeUI-2.4.2/assets/css/amazeui.css";
@import "../../../assets/css/personal.css";
@import "../../../assets/css/wallet.css";
</style>